import React, { PureComponent } from 'react';
import { Icon, Tag, Divider } from 'antd';
import moment from 'moment';
import groupBy from 'lodash/groupBy';
import Debounce from 'lodash-decorators/debounce';
import { Link } from 'dva/router';
import styles from './index.less';
// import HeaderSearch from '../HeaderSearch';
// <HeaderSearch
//   className={`${styles.action} ${styles.search}`}
//   placeholder="站内搜索"
//   dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
//   onSearch={value => {
//     console.log('input', value); // eslint-disable-line
//   }}
//   onPressEnter={value => {
//     console.log('enter', value); // eslint-disable-line
//   }}
// />
// @TODO 搜索

// import NoticeIcon from '../NoticeIcon';
// <NoticeIcon
//   className={styles.action}
//   count={currentUser.notifyCount}
//   onItemClick={(item, tabProps) => {
//     console.log(item, tabProps); // eslint-disable-line
//   }}
//   onClear={onNoticeClear}
//   onPopupVisibleChange={onNoticeVisibleChange}
//   loading={fetchingNotices}
//   popupAlign={{ offset: [20, -16] }}
// >
//   <NoticeIcon.Tab
//     list={noticeData['通知']}
//     title="通知"
//     emptyText="你已查看所有通知"
//     emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
//   />
//   <NoticeIcon.Tab
//     list={noticeData['消息']}
//     title="消息"
//     emptyText="您已读完所有消息"
//     emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
//   />
//   <NoticeIcon.Tab
//     list={noticeData['待办']}
//     title="待办"
//     emptyText="你已完成所有待办"
//     emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
//   />
// </NoticeIcon>
// @TODO 通知
// onNoticeVisibleChange,
//   onNoticeClear,
// fetchingNotices,
// const noticeData = this.getNoticeData();

export default class GlobalHeader extends PureComponent {
  componentWillUnmount() {
    this.triggerResizeEvent.cancel();
  }

  getNoticeData() {
    const { notices } = this.props;
    if (notices == null || notices.length === 0) {
      return {};
    }
    const newNotices = notices.map(notice => {
      const newNotice = { ...notice };
      if (newNotice.datetime) {
        newNotice.datetime = moment(notice.datetime).fromNow();
      }
      // transform id to item key
      if (newNotice.id) {
        newNotice.key = newNotice.id;
      }
      if (newNotice.extra && newNotice.status) {
        const color = {
          todo: '',
          processing: 'blue',
          urgent: 'red',
          doing: 'gold',
        }[newNotice.status];
        newNotice.extra = (
          <Tag color={color} style={{ marginRight: 0 }}>
            {newNotice.extra}
          </Tag>
        );
      }
      return newNotice;
    });
    return groupBy(newNotices, 'type');
  }

  handleUpload = () => {
    const { onUpload } = this.props;
    onUpload();
  };

  toggle = () => {
    const { collapsed, onCollapse } = this.props;
    onCollapse(!collapsed);
    this.triggerResizeEvent();
  };
  /* eslint-disable*/
  @Debounce(600)
  triggerResizeEvent() {
    const event = document.createEvent('HTMLEvents');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
  }
  render() {
    const { collapsed, isMobile, logo } = this.props;

    return (
      <div className={styles.header}>
        {isMobile && [
          <Link to="/" className={styles.logo} key="logo">
            <img src={logo} alt="logo" width="32" />
          </Link>,
          <Divider type="vertical" key="line" />,
        ]}
        <Icon
          className={styles.trigger}
          type={collapsed ? 'menu-unfold' : 'menu-fold'}
          onClick={this.toggle}
        />
        <div className={styles.right}>
          <Icon type="plus-circle" onClick={this.handleUpload} />
        </div>
      </div>
    );
  }
}
